<template>
	<view class="water-cost-order full box relative bg-primary flex-col" :style="statusBarHeightStyle">
		<view class="header-wrap">
			<image class="header-mask"
				src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032318237fe4a6330.png"
				mode="aspectFill"></image>
			<view class="navbar-wrap">
				<view class="device-box">
					<image class="check-icon" src="/static/img/check.png" mode="aspectFill"></image>
					<text class="device-title">家庭水站</text>
				</view>
				<view class="nav-title">
					<text>直饮水水费单</text>
				</view>
			</view>
			<view class="current-device">
				<text>当前设备：128365</text>
			</view>
		</view>
		<view class="w-wrap scroll-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="record-item" v-for="i in 10" :key="i">
							<image
								src="https://20250520wtjsq.xinyunweb.com/uploads/images/20250803/202508032336139a2332391.png"
								class="water-icon" mode="aspectFill"></image>
							<view class="record-details">
								<view class="item-title">
									<text>202504期水费单(L)</text>
								</view>
								<view class="item-date">
									<text>日期：20250401-20250430</text>
								</view>
							</view>
							<view class="item-right">
								<view class="item-price">
									<text>164.93</text>
								</view>
								<view class="detail-btn">
									<text>查看详情</text>
								</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import mixins from "@/mixins/mixin.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [mixins, MescrollMixin],
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.water-cost-order {
		.scroll-wrap {
			margin-top: -78rpx;

			.record-list {
				padding: 0 20rpx;

				.record-item {
					padding: 24rpx 22rpx;
					background-color: #fff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.item-right {
						margin-left: auto;

						.item-price {
							font-weight: bold;
							font-size: 30rpx;
							color: #3780F5;
						}

						.detail-btn {
							width: 110rpx;
							height: 44rpx;
							background: linear-gradient(90deg, #85AAE6 0%, #0967FE 100%);
							border-radius: 20rpx 20rpx 20rpx 20rpx;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 44rpx;
							text-align: center;
							margin-top: 8rpx;
						}
					}

					.record-details {
						margin-left: 20rpx;

						.item-title {
							font-weight: bold;
							font-size: 28rpx;
							color: #7C7C7C;
							line-height: 50rpx;
						}

						.item-date {
							font-size: 22rpx;
							color: #A6ABB7;
							line-height: 44rpx;
						}
					}

					.water-icon {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}

		.header-wrap {
			width: 100%;
			height: 370rpx;
			position: relative;
			padding-top: var(--status-height-value);
			box-sizing: border-box;

			.current-device {
				margin-top: 16rpx;
				padding-left: 32rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 56rpx;
				position: relative;
			}

			.navbar-wrap {
				position: relative;
				box-sizing: border-box;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.device-box {
					display: flex;
					align-items: center;
					position: absolute;
					left: 32rpx;
					top: 50%;
					transform: translateY(-50%);

					.device-title {
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						margin-left: 8rpx;
					}

					.check-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.nav-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}

			.header-mask {
				height: 370rpx;
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>